<template>
	<div :id="id" :style="style"></div>
</template>
<script>
	import echarts from 'echarts/lib/echarts';
	import "echarts/lib/chart/sunburst";
	import 'echarts/lib/component/tooltip';
	import 'echarts/lib/component/title';
	import 'echarts/lib/component/legend';
	var category = [
		"1",
		"2",
		"3",
		"4",
		"5",
		"6",
		"7",
		"8",
		"9",
		"10",
		"11",
		"12",
		"13",
		"14",
		"15",
		"16",
		"17",
		"18",
		"19",
		"20",
		"21",
		"22",
		"23",
		"24",
		"25",
		"26",
		"27",
		"28",
		"29",
		"30",
		"31",
	]
	var lineData = [
			1092,
			2728,
			2045,
			2348,
			3808,
			3097,
			3867,
			4715,
			4444,
			5415,
			5061,
			6677,
			5521,
			6560,
			1092,
			2728,
			2045,
			2348,
			3808,
			3097,
			3867,
			4715,
			4444,
			5415,
			3097,
			3867,
			4715,
			4444,
			5415,
			5061,
			3677
		]
		var barData = [
				550,
				650,
				750,
				850,
				990,
				1200,
				1400,
				2100,
				2300,
				2450,
				2550,
				3300,
				460,
				500,
				550,
				650,
				750,
				850,
				990,
				2200,
				1400,
				2100,
				850,
				990,
				1200,
				1400,
				2100,
				2300,
				2450,
				2550,
				750
			]
// rateData 
var rateData = []
			export default {
				name: "Chart",
				data() {
					return {
						//echarts实例
						chart: ""
					};
				},
				watch: {
					//观察option的变化
					option: {
						handler(newVal, oldVal) {
							if (this.chart) {
								if (newVal) {
									this.chart.setOption(newVal);
								} else {
									this.chart.setOption(oldVal);
								}
							} else {
								this.init();
							}
						},
						deep: true //对象内部属性的监听，关键。
					}
				},
				props: {
					//父组件需要传递的参数：id，width，height，option
					id: {
						type: String
					},
					width: {
						type: String,
						default: "100%"
					},
					height: {
						type: String,
						default: "300px"
					},
					option: {
						type: Object,
						//Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
						//使用闭包保证一个vue实例拥有自己的一份props
						default () {
							return {
								title: {
									text: "",
								},
								tooltip: {
									trigger: "axis",
									backgroundColor: "rgba(255,255,255,0.1)",
									axisPointer: {
										type: "shadow",
										label: {
											show: true,
											backgroundColor: "#7B7DDC"
										}
									}
								},
								legend: {
									data: ["买入", "卖出", "收益率"],
									textStyle: {
										color: "#B4B4B4"
									},
									top: "5%"
								},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
								xAxis: {
									data: category,
									axisLine: {
										lineStyle: {
											color: "#B4B4B4"
										}
									},
									axisTick: {
										show: false
									}
								},
								yAxis: [{
										splitLine: {
											show: false
										},
										axisLine: {
											lineStyle: {
												color: "#B4B4B4"
											}
										},

										axisLabel: {
											formatter: "{value} "
										}
									},
									{
										splitLine: {
											show: false
										},
										axisLine: {
											lineStyle: {
												color: "#B4B4B4"
											}
										},
										axisLabel: {
											formatter: "{value} "
										}
									}
								],
								series: [{
										name: "收益率",
										type: "line",
										smooth: true,
										showAllSymbol: true,
										symbol: "emptyCircle",
										symbolSize: 8,
										yAxisIndex: 1,
										itemStyle: {
											normal: {
												color: "#F02FC2"
											}
										},
										data: rateData
									},
									{
										name: "卖出",
										type: "bar",
										barWidth: 10,
										itemStyle: {
											normal: {
												barBorderRadius: 5,
												color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: "#956FD4"
													},
													{
														offset: 1,
														color: "#3EACE5"
													}
												])
											}
										},
										data: barData
									},
									{
										name: "买入",
										type: "bar",
										barGap: "-100%",
										barWidth: 10,
										itemStyle: {
											normal: {
												barBorderRadius: 5,
												color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: "rgba(156,107,211,0.8)"
													},
													{
														offset: 0.2,
														color: "rgba(156,107,211,0.5)"
													},
													{
														offset: 1,
														color: "rgba(156,107,211,0.2)"
													}
												])
											}
										},
										z: -12,
										data: lineData
									}
								]
							}
						}
					}
				},
				computed: {
					style() {
						return {
							height: this.height,
							width: this.width
						};
					}
				},
				mounted() {
					this.setData();
					this.init();
				},
				methods: {
					setData () {
					  for (let i = 0; i < barData.length -1; i++) {
					    let rate = barData[i] / lineData[i];
					    rateData.push(rate.toFixed(2));
					  }
					},
					init() {
						this.chart = echarts.init(document.getElementById(this.id));
						this.chart.setOption(this.option);
						window.addEventListener("resize", this.chart.resize);
					}
				}
			};
</script>
